/* 
1 静态页面渲染
  1 轮播图
    1 发送请求获取接口当中的数据 
    2 学习 轮播图插件改怎么使用 
    3 轮播图有个bug
      1 如果第一次渲染的时候 是空数组的话 那么后期数组有值了,虽然页面有效果,但是自动播放 失效!! 
    4 如何优雅的解决 
      1 条件渲染  数组有值之后 轮播图才渲染 
 */




import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import axios from 'axios';

// 引入本地图片 先 引入 
import nav1Src from "../../assets/images/nav-1.png";
import nav2Src from "../../assets/images/nav-2.png";
import nav3Src from "../../assets/images/nav-3.png";
import nav4Src from "../../assets/images/nav-4.png";

// 引入局部样式 将样式文件看成是一个js文件来引入
import indexCss from "./index.module.scss";

import { baseURL, request } from "../../utils/request";

// 引入城市选择组件
import CitySearch from "../../components/CitySearch";


console.log("首页");


// 页面还是组件 首字母要大写 
class Index extends Component {
  state = {
    // 轮播图数组
    swiperList: [],
    // 导航数组
    navList: [{ id: 1, title: "整租", imgSrc: nav1Src }, { id: 2, title: "合租", imgSrc: nav2Src }, { id: 3, title: "地图找房", imgSrc: nav3Src }, { id: 4, title: "去出租", imgSrc: nav4Src },],
    // 租房小组
    rentGroupList: [],
    // 最新资讯
    newsList: [],
    imgHeight: 176,

  }
  componentDidMount() {
    this.getSwiper();
    this.getRentGroup();
    this.getNews();
  }
  // 获取轮播图数据
  async getSwiper() {

    const res = await request.get("/home/swiper")
    this.setState({
      swiperList: res.body
    })
  }
  // 获取租房小组数据
  async getRentGroup() {
    const res = await request.get("/home/groups");
    this.setState({
      rentGroupList: res.body
    })
  }
  // 获取最新资讯的数据
  async getNews() {
    // axios 底层做了处理  如果 不加 http 自动的加载 配置好的前缀部分
    // 如果 加了http的  会忽略 配置好的前缀部分 !! 
    const res = await request.get("/home/news");
    this.setState({
      newsList: res.body
    })
  }

  render() {
    const { swiperList, navList, rentGroupList, newsList } = this.state;
    return (
      <div>
       
        {/* 轮播图 start */}
        <div className={indexCss.index_carousel}>
        <div className={indexCss.city_search_wrap}>

          <CitySearch ></CitySearch>
          
          </div>
          {swiperList.length && <Carousel
            autoplay
            infinite
          >
            {swiperList.map(val => (
              <a
                key={val.id}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={baseURL + val.imgSrc}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>}
        </div>
        {/* 轮播图 end */}

        {/* 导航 start */}
        <div className={indexCss.index_nav}>
          {navList.map(v => <div className={indexCss.nav_item} key={v.id} >
            <img src={v.imgSrc} alt="" />
            <div className={indexCss.nav_title}>{v.title}</div>
          </div>)}
        </div>
        {/* 导航 end */}

        {/* 租房小组 start */}
        <div className={indexCss.rent_group}>
          <div className={indexCss.rent_group_title}>
            <span>租房小组</span>
            <span>更多</span>
          </div>
          <div className={indexCss.rent_group_content}>
            {
              rentGroupList.map(v => <div key={v.id} className={indexCss.rent_item}   >
                <div className={indexCss.rent_item_info}>
                  <div className={indexCss.rent_title}>{v.title}</div>
                  <div className={indexCss.rent_desc}>{v.desc}</div>
                </div>
                <div className={indexCss.rent_item_img}>
                  <img src={baseURL + v.imgSrc} alt="" />
                </div>
              </div>)
            }
          </div>
        </div>
        {/* 租房小组 end */}

        {/* 最新资讯 start */}
        <div className={indexCss.index_news}>
          <div className={indexCss.index_news_title}> 最新资讯 </div>
          <div className={indexCss.index_news_content}>
            {newsList.map(v => <div className={indexCss.news_item} key={v.id}   >
              <div className={indexCss.news_item_img}>
                <img src={baseURL + v.imgSrc} alt="" />
              </div>
              <div className={indexCss.news_item_info}>
                <div className={indexCss.news_item_title}>{v.title}</div>
                <div className={indexCss.news_item_desc}>
                  <div className={indexCss.news_item_from}>{v.from}</div>
                  <div className={indexCss.news_item_date}>{v.date}</div>
                </div>
              </div>
            </div>)}
          </div>
        </div>
        {/* 最新资讯 end */}
      </div>
    );
  }
}
export default Index;